<template>
	<view class="editInfor">
		<view class="sex">性别</view>
		<view class="classify">
			<view class="nan" >
				<icon class="iconfont iconnan" :class="act==1?'active':''" @tap="tabBtn('1')"></icon>
				<text>男生</text>
			</view>
			<view class="nv" >
				<icon class="iconfont iconnv " :class="act==2?'active':''" @tap="tabBtn('2')"></icon>
				<text>女生</text>
			</view>
		</view>
		<view class="rule">性别注册后将无法更改，请慎重选择！</view>
		<view class="nickName">昵称</view>
		<view class="nickIpt">
			<input type="text" placeholder="请输入昵称" placeholder-class="nickPlace"
			>
		</view>
		<view class="nickName nick">年龄</view>
		<view class="nickIpts">
			<picker  mode='selector' :value="index" :range="sectle" class="nickPlace"  @change="bindDateChange">{{sectle[index]}}</picker>
			<icon class="iconfont iconiconfontjiantou2"></icon>
		</view>
		<view class="nickName nick">所在城市</view>
		<view class="nickIpts">
			<picker mode="multiSelector"  :value="region" :custom-item="customItem" class="nickPlace">
			    <view class="picker">
			      {{region[0]}}，{{region[1]}}，{{region[2]}}
			    </view>
			 </picker>
			<icon class="iconfont iconiconfontjiantou2"></icon>
		</view>
		<view class="achieve" @tap="goHome">完成并登录</view>
		
	</view>
</template>

<script>
	export default {
		data (){
			return {
				act:1,
				index:0,
			   sectle:['请选择年龄','10','20','30','40'],
			   region: ['广东省', '广州市', '海珠区'],
			   customItem: '全部'
			}
		},
		methods: {
			tabBtn(num){
				this.act=num
			},
			goHome (){
				uni.reLaunch({
					url:'/pages/home/home'
				})
			},
			  bindDateChange: function(e) {
				  console.log(e)
				this.index = e.target.value
			},
			
			 bindRegionChange: function (e) {
			    console.log('picker发送选择改变，携带值为', e.detail.value)
			    this.region= e.detail.value
			  }

		}
	}
</script>

<style lang="less" scoped>
	.editInfor{
		width: 100%;
		box-sizing: border-box;
		padding: 0 50rpx;
		.sex{
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:#333;
			margin-top:100rpx;
		}
		.classify{
			display: flex;
			justify-content: space-around;
			width: 70%;
			margin: 0 auto;
			margin-top:50rpx;
		  view{
			  width: 50%;
			  text-align: center;
			  display: flex;
			  flex-direction: column;
			  icon{
				  height: 71rpx;
				  line-height: 71rpx;
				   font-size: 36rpx;
				   border:3px solid rgba(237,237,237,1);
				   color:#ed2c61;
			  }
			  .active{
				  background-color: #5A9AF0;
				  color:#fff;
				  border: 0;
			  }
			  text{
				  font-size:26rpx;
				  font-family:PingFang SC;
				  font-weight:500;
				  color:#333;
				  margin-top:30rpx
			  }
		  }
		}
		.rule{
		  font-size:26rpx;
		  font-family:PingFang SC;
		  font-weight:500;
		  color:rgba(153,153,153,1);
		  text-align: center;
		  margin-top:30rpx;
		}
		.nickName{
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			margin-top: 60rpx;
		}
		.nick{
			margin-top: 20rpx;
		}
		.nickIpt{
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			margin-top:20rpx;
			margin-bottom:20rpx;
			padding: 0 20rpx 0 0;
			box-sizing: border-box;
			input{
				width: 100%;
				height: 100%;
				padding-left:20rpx;
				background-color: #f2f2f2;
			}
			.nickPlace{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(153,153,153,1);
			}
		}
		.nickIpts{
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			margin-top:20rpx;
			margin-bottom:20rpx;
		   background-color: #f2f2f2;
		   display: flex;
		   justify-content: space-between;
		   align-items: center;
		   padding: 0 20rpx;
		   box-sizing: border-box;
			.nickPlace{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(153,153,153,1);
				width: 90%;
			}
			icon{
				
			}
		}
		.achieve{
			width:635rpx;
			height:88rpx;
			background:rgba(237,44,97,1);
			font-size:32rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(255,255,255,1);
			line-height:88rpx;
			text-align:center;
			margin: 0 auto;
			margin-top:100rpx;
		}
	}
</style>
